import React, {Component} from 'react';
/* react-redux 导入一个 connect 函数，该函数可以让我们的组件和仓库产生一个关联性*/
import {connect} from "react-redux";

class CartList extends Component {
    constructor(props) {
        super(props);
    }

    sub = (goodsId) => {
        /* 通过dispatch进行任务的派发，修改仓库的数据*/
        console.log('sub', goodsId);
        this.props.dispatch({type: 'sub', goodsId});

    }

    add = (goodsId) => {
        console.log('add', goodsId);
        this.props.dispatch({type: 'add', goodsId});
    }

    render() {
        return (
            <div>
                <h2>CartList组件-兄弟关系</h2>
                <hr/>
                {
                    this.props.cartList.map(item => {
                        return (
                            <ul key={item.id}>
                                <li>序号：{item.id}</li>
                                <li>名称：《{item.goodsName}》</li>
                                <li>价格 ¥：{item.goodsPrice}</li>
                                <li>
                                    <button onClick={() => {
                                        this.sub(item.id)
                                    }}>-
                                    </button>
                                    <i>{item.number}</i>
                                    <button onClick={() => {
                                        this.add(item.id)
                                    }}>+
                                    </button>
                                </li>
                                <li>小计：{item.goodsPrice * item.number}</li>
                            </ul>
                        )
                    })
                }

            </div>
        );
    }
}

/**
 * connect 函数可以让我们组件和仓库产生关联，该函数接收一个函数作为参数。
 *
 * 1. 接收的函数存在一个 state 参数，该参数就是我们的仓库数据
 *
 * 2. 接收的函数的返回值会被隐射到当前组件的属性上面
 * this.props.cartList = state;
 *
 * 3. connect还会把 dispatch 隐射到当前的组件属性 props 上面
 * this.props.dispatch = store.dispatch;
 *
 * 4. connect会自动我们进行订阅操作
 */
var fn = connect((state) => {
    // this.props.cartList = state;
    // this.props.dispathc = store.dispatch;
    return {
        cartList: state,
    }
});

export default fn(CartList);
